<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :show-close="true"
    :append-to-body="true"
    class="file-dialog medium-common-dialog-size"
  >
    <Title :title="title" style="font-size:16px; margin-bottom:16px"/>
    <el-table
      ref="orderTable"
      :data="fileList"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <el-table-column
        align="left"
        label="序号"
        width="50">
        <template slot-scope="scope">
          <div>{{ scope.$index + 1 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        label="文件名">
        <template slot-scope="scope">
          <div v-if="scope.row.url" class="url-file-container" >
            <el-tooltip placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">
                <div>
                  <div>文件名：{{ scope.row.name }}</div>
                  <img v-if="isImage( scope.row.name)" :src="scope.row.url" class="prev-img" alt="">
                </div>
              </div>
              <div class="url-file" @click="downloadFile(scope.row.url, scope.row.name)">
                {{ scope.row.name }}
              </div>
            </el-tooltip>
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        label="上传时间">
        <template slot-scope="scope">
          <div>{{ scope.row.time | format('YYYY-MM-DD HH:mm') }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        width="110"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="previewFile(scope.row.url, scope.row.name, true)"><div style="font-size:14px;">预览</div></el-button>
          <el-button type="text" @click="downloadFile(scope.row.url, scope.row.name, true)"><div style="font-size:14px;">下载</div></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import { downloadFile } from '@/utils';
import { format } from '@/filters/date';

export default {
  components: { Title },
  filters: { format },
  props: {
    fileList: {
      type: Array,
      default: () => [
        // {
        //   url: 'http://img.retailing.feibo.com/2021/8/19/bc2a1ccfaf3341f4aa71260be8c4a8dd',
        //   time: 1637651258414,
        //   name: '123.pdf'
        // },
        // {
        //   url: 'https://img.retailing.feibo.com/2021/11/23/bd00f9000cd2460792612f2d8fa2a3f3',
        //   time: 1637651258414,
        //   name: '1.doc'
        // }
      ]
    },
    title: {
      type: String,
      default: '合同附件'
    }
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    downloadFile,
    openDialog() {
      this.dialogVisible = true;
    },
    isImage(srcName) {
      const img = /(\.(gif|png|jpg|jpeg|webp|bmp|tif))$/i;
      return img.test(srcName);
    },
    isExcel(name) {
      const excel = /(\.(doc|docx|xls|xlsx|xlsm|ppt|pptx|txt))$/i;
      return excel.test(name);
    },
    previewFile(url, name) {
      try {
        const timestamp = (new Date()).valueOf();
        const random = Math.ceil(Math.random() * 10);
        const lists = name.split('.');
        const fileName = `${timestamp}${random}.` + lists[lists.length - 1];
        const previewUrl = `${url}#&fullfilename=${fileName}`;
        if (this.isExcel(name)) {
          const officeUrl = 'http://fileview.feibo.com/onlinePreview?url=' + encodeURIComponent(btoa(previewUrl));
          window.open(officeUrl, '_blank');
          return;
        }
        window.open(previewUrl, '_blank');
      } catch (error) {
        downloadFile(url, name);
        console.log(error);
      }
    },
    handleClose() {
      this.dialogVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.file-dialog {
  &::v-deep {
    .el-dialog {
      max-height: 530px;
    }
    .el-dialog__body {
      overflow: auto;
    }
  }
}
.url-file-container {
  display: flex;
  align-items: center;
}
.url-file {
  color: #406eff;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  &:hover {
    color: #406eff;
  }
  img {
    max-width: 100px;
    max-height: 100px;
  }
}
</style>
